<!--
 @description 编辑收货信息
 @fileName EditRecever.vue
 @author zengqiongying
 @created 2022/08/05 16:09:57
-->
<template>
  <div class="mine-container">
    <MineHeader arrow title="编辑收货信息" bg-color="#F5F6F7" />
    <div class="fixed-foot">
      <div class="btn-submit" @click="handleSubmit">保存</div>
    </div>
    <div class="pt-page">
      <div class="custom-form">
        <div class="cell">
          <van-field
            v-model="formData.consigneeName"
            label="收货人姓名："
            placeholder="请填写姓名（必填）"
            maxlength="50"
          />
        </div>
        <div class="cell">
          <van-field
            v-model="formData.consigneePhone"
            type="tel"
            label="收货电话："
            placeholder="请填写手机（必填）"
            format-trigger="onBlur"
            :formatter="formatterTel"
            maxlength="11"
          />
        </div>
        <div class="cell">
          <van-field
            v-model="formData.consigneePhoneBak"
            type="tel"
            label="备用电话："
            placeholder="请填写备用电话"
            format-trigger="onBlur"
            :formatter="formatterTel"
            maxlength="11"
          />
        </div>
        <div class="cell">
          <AreaField
            v-model="receiverArea"
            :option="areaOption"
            label="收货地址："
          />
        </div>
        <div class="cell">
          <van-field
            v-model="formData.receiverAddress"
            label="详细地址："
            placeholder="请填写详细地址"
            format-trigger="onBlur"
            maxlength="100"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import AreaField from '@/components/AreaField'
export default {
  name: 'EditRecever',
  components: {
    AreaField
  },
  data() {
    return {
      formData: {
        consigneeName: '', // 收货人姓名
        consigneePhone: '', // 收货人电话
        consigneePhoneBak: '', // 收货人备用电话 (非必填)
        receiverAddress: ''
      },
      receiverArea: {
        receiverProvinceId: '',
        receiverProvince: '',
        receiverProvinceCode: '',
        receiverCityId: '',
        receiverCity: '',
        receiverCityCode: '',
        receiverDistrictId: '',
        receiverDistrict: '',
        receiverDistrictCode: '',
        receiverTownId: '',
        receiverTown: '',
        receiverTownCode: ''
      },
      areaOption: {
        provinceId: 'receiverProvinceId',
        province: 'receiverProvince',
        provinceCode: 'receiverProvinceCode',
        cityId: 'receiverCityId',
        city: 'receiverCity',
        cityCode: 'receiverCityCode',
        districtId: 'receiverDistrictId',
        district: 'receiverDistrict',
        districtCode: 'receiverDistrictCode',
        townId: 'receiverTownId',
        town: 'receiverTown',
        townCode: 'receiverTownCode'
      },
      showArea: false
    }
  },
  computed: {
    ...mapGetters('order', ['consumer', 'receiver'])
  },
  watch: {
    receiver: {
      handler(val) {
        this.initFormData()
      },
      deep: true
    }
  },
  created() {
    this.initFormData()
  },
  activated() {
    this.initFormData()
  },
  methods: {
    ...mapMutations('order', ['updateConsumer', 'updateReceiver']),
    // 更新顾客信息
    initFormData() {
      const defKeys = ['consigneeName', 'consigneePhone', 'consigneePhoneBak']
      const hasDefVal = !!(this.consumer && this.consumer.consumerName)
      const data = this.receiver
      for (const key in this.formData) {
        let value = data && data[key] || ''
        if (defKeys.includes(key) && value === '' && hasDefVal) {
          if (key === 'consigneeName') {
            value = this.consumer.consumerName
          } else if (key === 'consigneePhone') {
            value = this.consumer.consumerPhone
          } else if (key === 'consigneePhoneBak') {
            value = this.consumer.consumerPhoneBak || ''
          }
        }
        this.$set(this.formData, key, value)
      }
      for (const key in this.receiverArea) {
        const value = data && data[key] || ''
        this.$set(this.receiverArea, key, value)
      }
    },
    formatterTel(value) {
      if (value && !(/^1[3456789]\d{9}$/.test(value))) {
        this.$toast('请填写正确的手机号')
      }
      return value
    },
    handleClickArea() {
      this.showArea = true
    },
    handleSubmit() {
      const { consigneeName = '', consigneePhone = '', consigneePhoneBak = '' } = this.formData
      if (consigneeName === '') {
        this.$toast('顾客姓名不可为空')
        return
      }
      if (consigneePhone === '') {
        this.$toast('顾客电话不可为空')
        return
      }

      if (!(/^1[3456789]\d{9}$/.test(consigneePhone))) {
        this.$toast('顾客电话格式错误')
        return
      }
      if (consigneePhoneBak !== '') {
        if (!(/^1[3456789]\d{9}$/.test(consigneePhoneBak))) {
          this.$toast('备用电话格式错误')
          return
        }
        if (consigneePhone === consigneePhoneBak) {
          this.$toast('备用电话不能与顾客电话相同')
          return
        }
      }

      if (this.receiverArea.town === '') {
        this.$toast('省市区不能为空')
        return
      }
      const address = `${this.formData.receiverAddress || ''}`.trim()
      if (address === '') {
        this.$toast('详细地址不能为空')
        return
      }
      const data = { ...this.formData, ...this.receiverArea }
      this.updateReceiver(data)
      this.$nextTick(() => {
        this.$router.go(-1)
      })
    }
  }
}

</script>
<style lang='less' scoped>
  .fixed-foot{
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12PX 16PX 22PX;
    height: 82PX;
    box-sizing: border-box;
    background: #F5F6F7;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn-submit{
      flex: 1;
      height: 48PX;
      line-height: 48PX;
      background: linear-gradient(90deg, #00D5C0 0%, #05C4C3 100%);
      border-radius: 12PX;
      color: #FFFFFF;
      font-weight: bold;
      font-size: 16PX;
      text-align: center;
      letter-spacing: 1px;
    }
  }
  .pt-page{
    padding:16px 16px 82PX;
  }
</style>
